<template>
	<a-spin :spinning="loading">
		<div class="bg-white">
			<div class="px-16 py-8">
				<a-tabs v-model="tabKey" @change="searchHandle">
					<a-tab-pane :key="undefined" tab="全部举报"/>
					<a-tab-pane :key="1" tab="待审举报"/>
					<a-tab-pane :key="2" tab="生效举报"/>
				</a-tabs>
				<a-row :gutter="16">
					<a-col class="mb-16 flex items-center" :span="8">
						<span class="label">客户名称：</span>
						<a-input @keyup.enter="searchHandle" v-model="search" :max-length="100" class="flex-1" placeholder="请输入客户名称"></a-input>
					</a-col>
					<a-col class="mb-16 flex items-center" :span="8">
						<span class="label">联系方式：</span>
						<a-input @keyup.enter="searchHandle" v-model="phone" class="flex-1" :max-length="50" placeholder="请输入联系方式"></a-input>
					</a-col>
					<a-col :span="8">
						<a-button type="primary" @click="searchHandle">查询</a-button>
						<a-button class="mx-8" @click="resetHandle">重置</a-button>
						<a class="ml-8 cursor-pointer" @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</a>
					</a-col>
				</a-row>
				<a-row :gutter="16" v-show="isExpand">
					<a-col class="mb-16 flex items-center" :span="8">
						<span class="label">证件号码：</span>
						<a-input v-model="credentialNo" @keyup.enter="searchHandle" :max-length="50" class="flex-1" placeholder="请输入证件号码"></a-input>
					</a-col>
					<a-col class="mb-16 flex items-center" :span="8">
						<span class="label">证件类型：</span>
						<a-select v-model="credentialType" allow-clear @change="searchHandle" class="flex-1" placeholder="请选择证件类型">
							<a-select-option v-for="item in credentialsList" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
						</a-select>
					</a-col>
					<a-col v-show="tabKey !== 1" class="mb-16 flex items-center" :span="8">
						<span class="label">处理结果：</span>
						<a-select v-model="resultStatus" allow-clear @change="searchHandle" class="flex-1" placeholder="请选择处理结果">
							<a-select-option v-for="item in customerLevelEnums" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
						</a-select>
					</a-col>
				</a-row>
				<!--列表数据-->
				<div>
					<a-table
						:columns="columns"
						class="table-con"
						:data-source="pageList"
						:pagination="false"
						:scroll="scroll"
					>
						<template #dishonestPerson="val, data">
							<div>名称：{{data.name}}</div>
							<div>手机：{{data.phone}}</div>
						</template>

						<template #card="val, data">
							<div>类型：{{data.credentialTypeName}}</div>
							<div class="ss-break-all">号码：{{data.credentialNo}}</div>
						</template>
						<template #report="val, data">
							<div class="flex items-center">
								<div>
									<div>
										<span>类型：</span>
										<span v-if="reportTypesFn(data.reportTypes, data).length>10">
                      <template>
                        <a-tooltip>
                          <template slot="title">
                            {{reportTypesFn(data.reportTypes, data)}}
                          </template>
                          <span class="cursor-pointer">{{reportTypesFn(data.reportTypes, data).substring(0,11)}}...</span>
                        </a-tooltip>
                      </template>
                    </span>
										<span v-else>{{reportTypesFn(data.reportTypes, data)}}</span>
									</div>
									<div>
										<span>原因：</span>
										<span v-if="data.reportReason.length>10">
                      <template>
                        <a-tooltip>
                          <template slot="title">
                            {{data.reportReason}}
                          </template>
                          <span class="cursor-pointer">{{data.reportReason.substring(0,11)}}...</span>
                        </a-tooltip>
                      </template>
                    </span>
										<span v-else>{{data.reportReason}}</span>
									</div>
								</div>
								<div @click="openPicsHandle(data)" class="ml-10 cursor-pointer">
									<a-icon type="picture" :style="{ fontSize: '20px', color: '#08c' }"/>
								</div>
							</div>
						</template>
						<template #state="val, data">
              <a-badge v-if="data.reportAuditStatus === 1" status="warning" text="待审核"/>
              <a-badge v-else status="success" text="已生效"/>
						</template>
						<template #resultTitle>
							<section>处理结果</section>
						</template>
						<template #result="val, data">
							<section v-if="data.resultStatus === 0">
								<a-badge status="default"></a-badge>未判定
							</section>
							<section v-else>
								<a-badge status="processing"></a-badge>判定{{ $utils.getEnumName(customerLevelEnums, data.resultStatus)}}
							</section>
						</template>
						<template #createTimeTitle>
							<section>操作时间</section>
              <!--/C:取消-->
							<section class="text-12" style="color: #999">R:举报/H:处理</section>
						</template>
						<template #createTime="createTime, data">
							<section>
								<a-avatar style="transform: scale(.7); font-size: 16px;">R</a-avatar>{{ createTime }}
							</section>
							<section v-if="$utils.judgeTime(data.handlerTime)">
								<a-avatar style="transform: scale(.7); font-size: 16px;color: #fff; background: #1890FF">H</a-avatar>{{ data.handlerTime }}
							</section>
							<!--<section>-->
								<!--<a-avatar style="transform: scale(.7); font-size: 16px;">C</a-avatar>{{ createTime }}-->
							<!--</section>-->
						</template>
						<template #createByName="createByName, data">
							<section>{{ data.vendorId === 0 && !data.vendorName ? '平台' : data.vendorName }}</section>
							<section class="text-12" style="color: #999">{{ createByName }}</section>
						</template>
						<template #set="val, data" v-if="$permissionJudge('CustomerReportAudit')">
							<a class="cursor-pointer" v-if="data.reportAuditStatus === 1" @click="auditReport(data)">审核</a>
						</template>
					</a-table>
					<!--底部页码-->
					<div class="flex justify-end mt-20 items-center">
						<div class="pr-20">共{{rowCount}}条记录，第{{pageNum}}/{{Math.ceil(rowCount/rowsNum)}} 页</div>
						<a-pagination
							v-model="pageNum"
							show-size-changer
							show-quick-jumper
							:page-size.sync="rowsNum"
							:total="rowCount"
							@showSizeChange="sizeChange"
							@change="pageChange"
						>
						</a-pagination>
					</div>
				</div>
				<!-- 重新举报或者撤销举报弹框-->
				<a-modal v-model="isShowReportPop" :title="reportType==1?'请确认撤销':'重新举报'" @ok="reporthandleOk">
					<p v-if="reportType == 1">请确认是否撤销举报？撤销举报后，如果在没有其他举报生效的情况下，该客户将会从黑名单中自动解封。请问您确认撤销举报吗？</p>
					<p v-else>请确认是否重新举报？重新举报后，该客户将会直接进入黑名单，会影响该客户后续一系列的交易操作。请问您确认重新举报吗？</p>
				</a-modal>
				<!-- 查看图片弹框-->
				<a-modal v-model="isShowPicsPop" :footer="null" title="查看举报图片" @ok="picsHandleOk">
					<div class="flex flex-wrap ss-pics-box flex-top">
						<img
							class="w-100 h-100 m-5 br5 object-cover ss-img cursor-pointer"
							:src="item.filePath"
							v-for="(item, index) in reportPics"
							:key="index"
							@click="openPreviewImage(item.filePath)"
						>
					</div>
				</a-modal>
				<!--图片预览-->
				<a-modal :visible="isPreviewVisible" :footer="null" @cancel=" isPreviewVisible = false">
					<div class="m-20">
						<img class="mx-w-700 mx-h-700 w-full " :src="previewImage"/>
					</div>
				</a-modal>
				<a-modal
					v-model="isShowTrial"
					width="1100px"
					title="审核举报记录"
					ok-text="确定处理"
          @ok="confirmAudit"
				>
					<a-spin :spinning="detailsLoading">
            <section class="info-form">
              <section class="text-18 font-bold mb-16">基本信息</section>
              <a-form class="inline-form">
                <a-row type="flex" :gutter="16" style="margin-right: 0; padding-right: 4px;">
                  <a-col :span="8">
                    <a-form-item label="客户姓名">{{ editData.name }}</a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="联系方式">{{ editData.phone }}</a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="证件号码">{{ editData.credentialNo }}</a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="证件有效期">{{ $utils.judgeTime(editData.credentialEffectiveTime) ? moment(editData.credentialEffectiveTime).format('YYYY-MM-DD') : '未知' }}</a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="当前风险等级">
                      <a-badge class="mr-4" :status="statusMap[editData.currentStatus]" :text="$utils.getEnumName(customerLevelEnums, editData.currentStatus)"/>
                      <a-tooltip v-if="editData.currentStatus === 5" title="黑名单客户不允许进行任何租车服务">
                        <a-icon style="color: #f5222d" type="question-circle"/>
                      </a-tooltip>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
              <section class="text-18 font-bold mb-16">举报信息</section>
              <a-form class="inline-form">
                <a-row type="flex" :gutter="16" style="margin-right: 0; padding-right: 4px;">
                  <a-col :span="8">
                    <a-form-item label="举报类型">
                      <a-tag v-for="item in editData.reportTypeNames.filter(e => !e || e !== '-')" color="#1890ff" :key="item">{{ item }}</a-tag>
                    </a-form-item>
                  </a-col>
                  <a-col v-if="editData.reportOtherType && editData.reportOtherType !== '-'" :span="8">
                    <a-form-item label="具体类型">{{ editData.reportOtherType }}</a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="举报原因">{{ editData.reportReason }}</a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item style="display: block;" label="租赁合同\身份证照片\失信凭证">
                      <PreviewImage is-open class="mt-22" :value="editData.reportPics.map(e => e.filePath)"/>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-divider class="my-16"/>
                    <a-form-item required style="display: block;" label="最终标记客户等级">
                      <section class="flex items-center mt-22">
                        <a-select v-model="editResultStatus" style="width: 200px;" placeholder="请选择最终标记客户等级">
                          <a-select-option v-for="item in customerLevelEnums" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
                        </a-select>
                        <section class="ml-8">
                          <a href="javascript:;" @click="editResultStatus = editData.currentStatus">维持现状不变</a>
                        </section>
                      </section>
                    </a-form-item>
                    <a-divider class="my-16"/>
                    <section class="description ml-8 mt-16">
                      <h3>说明</h3>
                      <a-descriptions title="如何应用客户风险等级？">
                        <a-descriptions-item>如果客户当前风险等级比最终确定风险等级高，那么将不会更新客户风险等级。比如如果客户已处于黑名单中，那么将其最终确定为灰名单I级是没有实际效果的。</a-descriptions-item>
                      </a-descriptions>
                    </section>
                  </a-col>
                </a-row>
              </a-form>
            </section>
          </a-spin>
				</a-modal>
			</div>
		</div>
		<route-view></route-view>
	</a-spin>
</template>
<script>
import {
  getCustomerReportPics,
  getPageCustomerReportList,
  getCustomerReport,
  cancelReport,
  auditReport
} from '@/api/report'
import PreviewImage from '@/components/PreviewImage'
import { RouteView } from '@/layouts'
import moment from 'moment'
export default {
  name: 'ReportPersonItem',
  components: { RouteView, PreviewImage },
  data() {
    return {
      isExpand: false,
      tabKey: undefined,
      columns: [
        {
          title: '被举报人信息',
          scopedSlots: { customRender: 'dishonestPerson' }
        },
        {
          title: '证件信息',
          scopedSlots: { customRender: 'card' }
        },
        {
          title: '举报信息',
          scopedSlots: { customRender: 'report' }
        },
        {
          width: 100,
          title: '状态',
          align: 'center',
          scopedSlots: { customRender: 'state' }
        },
        {
          width: 140,
          align: 'center',
          slots: {title: 'resultTitle'},
          scopedSlots: { customRender: 'result' }
        },
        {
          dataIndex: 'createTime',
          align: 'center',
          width: 180,
          slots: {title: 'createTimeTitle'},
          scopedSlots: {customRender: 'createTime'},
        },
        {
          width: 140,
          title: '举报人',
					align: 'center',
          dataIndex: 'createByName',
          scopedSlots: {customRender: 'createByName'}
        },
        {
          title: '操作',
          align: 'center',
          width: 80,
          fixed: 'right',
          scopedSlots: { customRender: 'set' }
        }

      ],
      reportType: 1, // 1：撤销举报 2：重新举报
      isShowTrial: false,
      isShowReportPop: false, // 是否显示举报弹框
      isShowPicsPop: false, // 是否显示举报图片弹框
      reportPics: [], // 举报凭证列表
      reportReasonList: [], // 举报类型
      editData: {
        reportPics: [],
        reportTypeNames: [],
      },// 编辑的数据
      credentialsList: [],
      customerLevelEnums: [],
      loading: false, // 页面是否在加载中
      detailsLoading: false,
      pageList: [],// 列表总数据
      search: '', // 失信人模糊搜索
      phone: '',
      credentialNo: '',
      statusMap: {
        1: 'success',
        2: 'warning',
        3: 'warning',
        4: 'warning',
        5: 'error'
      },
      credentialType: undefined,
      resultStatus: undefined,
      editResultStatus: undefined,
      pageNum: 1, // 页码
      rowsNum: 10, // 每页的数据
      rowCount: 0, // 总页码数据
      isPreviewVisible: false //  图片预览
    }
  },
  computed: {
    reportTypesFn() { // 举报类型
      return (e, d) => {
        var arr = []
        this.reportReasonList.forEach((o_item) => {
          e.split(',').forEach((t_item) => {
            if (o_item.value == t_item && o_item.value != -1) {
              arr.push(o_item.name)
            }
          })
        })
        if (e.split(',').includes('-1')) {
          arr.push(d.reportOtherType)
        }
        return arr.join('，')
      }
    },
    scroll() {
      return {x: 1400}
		}
  },
  watch: {
    isShowTrial(val) {
      if (!val) this.editResultStatus = undefined
    }
  },
  async created() {
    this.credentialsList = await this.$utils.getDictList('CredentialType')
    this.customerLevelEnums = await this.$utils.getDictList('CustomerLevel')
    this._getPageCustomerReportList() // 获取列表
    this.$utils.getDictList('ReportType').then(res => { // 举报类型
      this.reportReasonList = [...res, { value: -1, name: '其他' }]
    })

  },
  methods: {
    moment,
    _getPageCustomerReportList() { // 获取列表
      this.loading = true
      getPageCustomerReportList({
        search: this.search.trim(),
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        phone: this.phone.trim(),
        reportAuditStatus: this.tabKey,
        credentialNo: this.credentialNo.trim(),
        credentialType: this.credentialType,
        resultStatus: this.resultStatus,
      }).then((res) => {
        this.pageList = res.items
        this.rowCount = res.rowCount
      }).finally(() => {
        this.loading = false
      })
    },
    auditReport(data) {
      this.isShowTrial = true
      this.detailsLoading = true
      getCustomerReport({id: data.id}).then(data => {
        this.editData = data
      }).finally(() => this.detailsLoading = false)
    },
    confirmAudit() {
      if (this.editResultStatus === undefined) return this.$message.warning('请选择最终标记客户等级')
      this.detailsLoading = true
      auditReport({id: this.editData.id, resultStatus: this.editResultStatus}).then(data => {
        this.resultStatus = undefined
        this.isShowTrial = false
        this.$message.success('审核成功！')
        this._getPageCustomerReportList()
      }).finally(() => this.detailsLoading = false)
    },
    openPicsHandle(e) { // 打开弹框
      getCustomerReportPics({ reportId: e.id }).then((res) => {
        this.reportPics = res
        if (res.length > 0) {
          this.isShowPicsPop = true
        }
        console.log(res, '查看举报凭证')
      })
    },

    picsHandleOk() { // 确定查看pic弹框

    },

    searchHandle() { // 搜索
      this.pageNum = 1
      this._getPageCustomerReportList()
    },

    resetHandle() { // 重置
      this.search = ''
			this.phone = ''
			this.credentialNo = ''
      this.credentialType = undefined
      this.resultStatus = undefined
      this.searchHandle()
    },

    sizeChange(pageNum, rowsNum) { // 每页数量变化的时候
      this.pageNum = pageNum
      this.rowsNum = rowsNum
      this._getPageCustomerReportList()
    },

    pageChange(pageNum, rowsNum) {
      this.pageNum = pageNum
      this.rowsNum = rowsNum
      this._getPageCustomerReportList()
    },

    openPreviewImage(e) { // 图片预览
      window.open(e)
    }
  }
}
</script>
<style scoped lang="less">
	.ss-img {
		border: 1px solid #eee;
	}

	.ss-pics-box {
		min-height: 350px
	}
	.info-form {
		.ant-form-item {
			margin-bottom: 22px;
		}

		/deep/ .ant-form-item-label {
			line-height: 1.5;
		}

		/deep/ .ant-form-item-control {
			color: #000;
			line-height: 1.5;
			word-break: break-all;
		}
	}
	.description {
		h3 {
			color: rgba(0,0,0,.85);
			font-size: 16px;
			line-height: 32px;
		}
		/deep/ .ant-descriptions-title {
			margin: 0 0 4px;
			color: rgba(0,0,0,.65);
			font-size: 14px;
			line-height: 22px;
			font-weight: normal;
		}
		/deep/ .ant-descriptions-item-content {
			color: rgba(0,0,0,.45);
			font-size: 14px;
		}
	}

</style>
